<template>
    <div class="BranchTreeSelect" v-if="UIAuth._api_admin_branch_get">
        <el-input v-model="branchName" :placeholder="placeholder" @focus="showDialog = true" clearable @clear="clear"></el-input>
        <p-el-dialog v-model="showDialog" title="选择部门机构" width="40%" :height="bodySize.height - 200" @close="showDialog = false" @confirm="change">
            <el-tree ref="elBranchTreeSelect" node-key="id" v-loading="loading" :data="dataListTree" :props="{ children: 'children', label: 'branch_name' }" highlight-current
                :expand-on-click-node="false" default-expand-all @current-change="currentChange"></el-tree>
        </p-el-dialog>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from "vue";
import { useStore } from "vuex";
import TreeTool from "@/lib/TreeTool";
import { appApi } from "@/lib/api/appApi";
import PElDialog from "@/components/PElDialog.vue";
import utils from "@/lib/utils";
/**
 * state 数据类型
 */
interface IState {
    /**
     * 部门ID
     */
    branchId: string;
    /**
     * 部门名称
     */
    branchName: string;
    loading: boolean;
    /**
     * 原始数据列表
     */
    dataList: any[];
    /**
     * 树数据列表
     */
    dataListTree: any[];
    /**
     * 是否显示 添加编辑窗口
     */
    showDialog: boolean;
    /**
     * 单前选择的节点
     */
    selectRow: any;
}
export default defineComponent({
    name: "BranchTreeSelect",
    components: { PElDialog },
    props: {
        modelValue: {
            type: String,
            default: "",
        },
        height: {
            type: Number,
            default: 0,
        },
        placeholder: {
            type: String,
            default: "请选择部门机构",
        },
    },
    emits: ["update:modelValue", "change"],
    setup(props, { emit }) {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const treeTool: TreeTool = new TreeTool(); // 树工具
        const state = reactive<IState>({
            branchId: "",
            branchName: "",
            loading: false,
            dataList: [],
            dataListTree: [],
            showDialog: false,
            selectRow: null,
        });
        /**
         * 回显内容
         */
        const getBidRow = (bid: string) => {
            if (state.selectRow == null) {
                state.selectRow = treeTool.get(state.dataList, bid);
                if (state.selectRow != null) {
                    state.branchName = state.selectRow.branch_name;
                }
            }
        };
        // 监听 绑定值
        watch(
            () => props.modelValue,
            (val: string) => {
                if (utils.empty(val)) {
                    state.branchName = "";
                    state.selectRow = null;
                } else {
                    getBidRow(val);
                }
            }
        );
        /**
         * 获取内容
         */
        const getList = () => {
            state.loading = true;
            appApi.BranchList(
                {},
                (data: any) => {
                    state.dataList = utils.CopyNewObject(data);
                    state.dataListTree = treeTool.listToTree(data, "");
                    state.loading = false;
                    if (!utils.empty(props.modelValue)) {
                        getBidRow(props.modelValue);
                    }
                },
                () => (state.loading = false)
            );
        };
        /**
         * 返回绑定值
         */
        const setBid = (bid: string) => {
            emit("update:modelValue", bid);
            emit("change");
        };
        /**
         * 选择回调
         */
        const change = () => {
            if (state.selectRow != null) {
                setBid(state.selectRow.id);
                state.branchName = state.selectRow.branch_name;
            } else {
                setBid("");
                state.branchName = "";
            }
            state.showDialog = false;
        };
        /**
         * 清空
         */
        const clear = () => {
            state.selectRow = null;
            change();
        };
        /**
         * 当前选中节点变化时触发的事件
         */
        const currentChange = (row: any, Node: any) => {
            state.selectRow = row;
            change();
        };

        getList();
        return {
            UIAuth,
            bodySize,
            ...toRefs(state),
            change,
            clear,
            currentChange,
        };
    },
});
</script>

<style scoped lang="scss">
</style>